<script setup>
</script>
<template>
<canvas id="myCanvas" width="360" height="650"></canvas>
</template>
<script>
import facecat from './facecat.js';
let gPaint = new facecat.FCPaint();
/*
 * 重置大小
 */
let resizeAll = function () {
	try {
		const canvas = document.getElementById('myCanvas');
		canvas.width = document.documentElement.clientWidth;
		canvas.height = document.documentElement.clientHeight;
		facecat.scaleCanvas(gPaint);
		facecat.updateViewDefault(gPaint.views);
	} catch (err) {
	}
	facecat.invalidate(gPaint);
};

export default { 
	mounted(){
		const canvas = document.getElementById('myCanvas');
		gPaint.isMobile = facecat.isMobileMode();
		window.addEventListener('resize', resizeAll, true);
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		gPaint.canvas = canvas;
		facecat.scaleCanvas(gPaint);
		facecat.addDefaultEvent(canvas, gPaint);
		let xml = `<?xml version="1.0" encoding="UTF-8"?>
		<html xmlns="facecat">
				<head>
			</head>
			<body>
				<div dock="fill">
					<input type="button" name="Button" text="Button" cornerradius="10" size="50%,50%" location="25%,25%" backcolor="rgb(219,68,83)" />
				</div>
			</body>
		</html>`;
		facecat.renderFaceCat(gPaint, xml);	
		}
}
</script>
